<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/do.js"></script>
<script type="text/javascript">
Do(function(){
    $('#demo1 a').click(function(e){
        e.preventDefault();
        $(this).animate({fontSize: '24px'}, 1000).fadeOut(1000);
    });
});
</script>
</head>
<body>
<pre>
http://kejun.github.com/Do/
https://github.com/kejun/Do/tree/

使用方法: 只需要在head里引入do.js文件

        <script src="../do.min.js"></script> (4.4k, gzip:1.8k)
        

Demo 1: 执行inline script
inline的javascript如果依赖核心库需放入Do中。如下：

    Do(function(){
        $('#demo1 a').click(function(e){
            e.preventDefault();
            $(this).animate({fontSize: '24px'}, 1000).fadeOut(1000);
        });
    });
    

Demo: Click Here.
Demo 2: 依赖外部文件
2.1 最后一个参数是处理方法，前面是依赖列表，可以是文件地址或模块名。如：

    Do('js/tip.js', function(){
        $('#demo2 a').simpleTip();
    });
    

2.2 inline定义依赖关系。如：

    Do({path: 'js/tip.js', requires:['tip-base.js']}, function(){
        $('#demo2 a').simpleTip();
    });
    

Demo: Mouseover Here.
Demo 3: 依赖模块方式
模块的定义。模块定义建议统一放在一个地方，如head里。

        // add方法定义模块和模块的依赖关系。注：add方法并不会加载模块，只是添加模块配置。
        Do.add('lightBox-css', {path: '{URL}', type: 'css'});
        Do.add('lightBox', {path: '{URL}', type: 'js', requires: ['lightBox-css']});
    

在使用的时候更简便且不用担心文件的版本问题。注：在使用时才会执行文件加载

        // 引用模块
        Do('lightBox', function(){
            $('#demo3 a').lightBox({
                imageLoading:           'assets/lightbox-ico-loading.gif',
                imageBtnPrev:           'assets/lightbox-btn-prev.gif',
                imageBtnNext:           'assets/lightbox-btn-next.gif',
                imageBtnClose:          'assets/lightbox-btn-close.gif',
                imageBlank:             'assets/lightbox-blank.gif'
            });
        });
    

Demo: Nominees: Best Rock Album Nominees: Best Alternative Music Album
Demo 4: 在DOMReay后执行
如果要确保顺利操作页面上的任意结点，最好使用ready方法，让队列在DOMReady后执行，当然这样会比直接用Do延后一些执行。

    Do.ready('dialog', function() {
        var dlg = dui.Dialog({
             content: 'hi, 在ready触发队列执行是一种更稳妥的选择. <pre>  Do.ready(your queue...)</pre>', 
             buttons: ['confirm'],
             width: 400
        }).open();
        setTimeout(function(){
          dlg.update();
        }, 0);
    });
    

Demo 5: Delay执行
有些JS不那么着急执行，不妨delay一段时间后再执行。比如：预加载一些东西。

    Do.delay(2000, function() {
      (new Image()).src = 'URL';
      (new Image()).src = 'URL';
      (new Image()).src = 'URL';
    });
    

Demo 6: 注入CSS
虽然不鼓励这么干，但有些时候的确有这样的需求。

    Do.css([
        '.dui-dialog .hd h3 { margin:0; }',
        '.dui-dialog-close:link { text-decoration:none; }'
    ].join(''));
    

Demo 7: 声明全局模块
声明了全局模块，后面的队列会默认先加载全局模块。在实际应用中不要滥用，只声明必要的，因为这样会影响一些性能。

    Do.global('dialog');
    

Demo 8: 配置Do
8-1: 关闭自动加载核心库功能。解决和传统引用混用的情况

    <script type="text/javascript" src="js/do.min.js" data-cfg-autoload="true|false"></script>
    

8-2: 指定其他核心库。注：将覆盖原有的

    <script type="text/javascript" src="js/do.min.js" data-cfg-corelib="http://img3.douban.com/js/packed_jquery.min2.js"></script>
    

8-3: 代码中修改配置

      // setConfig方法
      // 可以配置的参数，包括：
      // 1.加载超时
      Do.setConfig('timeout', 3000);

      // 2.超时回调
      Do.setConfig('timeoutCallback', function(url){
        // log timeout file.
      });

      // 3.设置核心库
      Do.setConfig('coreLib', [...]);

      // 4.模块列表
      /* 模块设置的格式：
          { 
            'mod1' : { path: 'URL 1', type: 'js|css', requires: ['文件地址|模块名'] },
            'mod2' : { path: 'URL 2', type: 'js|css', requires: ['文件地址|模块名'] },
            'mod2' : { path: 'URL 3', type: 'js|css', requires: ['文件地址|模块名'] },
            ...
          }
      */
      Do.setConfig('mods', {...});
    

Demo 9: 模块间的公共数据通讯
由于文件是异步加载的，所以执行的顺序不是固定的。如果模块间存在数据上的依赖，可以使用setData和getData方法：


     Do(function(){
        Do.getData('test', function(value){
          console.log(value); //1000
        });
     });

     Do('slow-js', function(){
         Do.setData('test', 1000);
     });

    

升级说明：
Do的加载列表改成并行加载。依赖模块的加载是顺序的。如：

      // 在旧版，mod2可以依赖mod1
      // 在新版，mod1和mod2是并行加载的
      Do('mod1', 'mod2', function() { ... });

      // 如果mod2依赖mod1在模块定义中声明，如:
      Do.add('mod2', { path:'url', type:'js', requires:['mod1'] });
      Do('mod2', function() { ... });
    


</pre>
</body>
</html>